<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
      $(document).ready(function() {
        var c = document.getElementById("my_canvas").getContext("2d");
        var obj = document.getElementById("my_canvas").getBoundingClientRect();

        document.onmousedown = function(evt) {
          var x = evt.clientX - obj.left;
          var y = evt.clientY - obj.top;
          c.moveTo(x, y);

          document.onmousemove = function(e) {
            var x = e.clientX - obj.left;
            var y = e.clientY - obj.top;
            c.lineTo(x, y);
            c.stroke();
          }; // end of onmousemove

          document.onmouseup = function() {
            document.onmousemove = null;
          };
        }; // end of onmousedown	 
      });
    </script>
  </head>
  
  <body>
    <canvas id="my_canvas" width=600 height=500 style="border:solid rgb(239,241,244) 5px">
    </canvas>
  </body>
</html>